<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru">
<head>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
	<title>Закругленные уголки с помощью псевдоэлементов :before и :after</title>
<style>

.box1{background-color:#ffe400;padding: 20px;}
.box1:before{display: block;height: 19px;background: url(1_tr.gif) no-repeat 100% 0;content: url(1_tl.gif);margin: -20px -20px 1px -20px;}
.box1:after{display: block;height: 19px;background: url(1_br.gif) no-repeat 100% 0;content: url(1_bl.gif);margin: 1px -20px -20px -20px;}

.box2{background: url(2_bg.gif) #f8f1dd repeat-x 0 100%;padding: 20px;}
.box2:before{display: block;height: 20px;background: url(2_tr.gif) no-repeat 100% 0;content: url(2_tl.gif);margin: -20px -20px 0 -20px;}
.box2:after{display: block;height: 44px;background: url(2_br.gif) no-repeat 100% 0;content: url(2_bl.gif);margin: 0 -20px -20px -20px;}

</style>
<!--[if lte IE 7]>
<style>
.box1{zoom:1;behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '<span style="display: block;height: 19px;background: url(1_tr.gif) no-repeat 100% 0;margin: -20px -20px 1px -20px;"><img src="1_tl.gif" alt="" /></span>' + this.innerHTML + '<span style="display: block;height: 19px;background: url(1_br.gif) no-repeat 100% 0;margin: 1px -20px -20px -20px;"><img src="1_bl.gif" alt="" /></span>') : '');}
.box2{zoom:1;behavior:expression(!this.isInserted==true ? this.isInserted=(this.innerHTML = '<span style="display: block;height: 20px;background: url(2_tr.gif) no-repeat 100% 0;margin: -20px -20px 0 -20px;"><img src="2_tl.gif" alt="" /></span>' + this.innerHTML + '<span style="display: block;height: 44px;background: url(2_br.gif) no-repeat 100% 0;margin: 0 -20px -20px -20px;"><img src="2_bl.gif" alt="" /></span>') : '');}
</style>
<![endif]-->
</head>
<body>

<h2>Пример 1</h2>
<div class="box1">
	Несмотря на сложности, лемма стремится к нулю. Полином, следовательно, основан на опыте. 
	Собственное подмножество, следовательно, отображает метод последовательных приближений, 
	при этом, вместо 13 можно взять любую другую константу. Тройной интеграл, общеизвестно, 
	транслирует экспериментальный ротор векторного поля, что известно даже школьникам.
</div>

<h2>Пример 2</h2>
<div class="box2">
	Несмотря на сложности, лемма стремится к нулю. Полином, следовательно, основан на опыте. 
	Собственное подмножество, следовательно, отображает метод последовательных приближений, 
	при этом, вместо 13 можно взять любую другую константу. Тройной интеграл, общеизвестно, 
	транслирует экспериментальный ротор векторного поля, что известно даже школьникам.
</div>
</body>
</html>